<template>
  <div class="model-manage-page">
    <el-card>
      <template #header>
        <div class="header-bar">
          <span>模型管理</span>
          <el-select v-model="filterStatus" placeholder="状态筛选" size="small" style="width: 150px; margin-left: 10px;">
            <el-option label="全部" value="" />
            <el-option label="启用" value="enabled" />
            <el-option label="禁用" value="disabled" />
          </el-select>
          <el-select v-model="filterSource" placeholder="来源筛选" size="small" style="width: 150px; margin-left: 10px;">
            <el-option label="全部" value="" />
            <el-option label="用户上传" value="user" />
            <el-option label="平台推荐" value="platform" />
          </el-select>
          <el-button size="small" type="danger" @click="resetFilters">重置</el-button>
        </div>
      </template>

      <el-table :data="filteredModels" border style="margin-top: 10px;">
        <el-table-column prop="name" label="模型名称" />
        <el-table-column prop="type" label="模型类型" />
        <el-table-column prop="time" label="创建时间" />
        <el-table-column prop="source" label="数据来源" />
        <el-table-column label="状态">
          <template #default="{ row }">
            <el-tag :type="row.status === 'enabled' ? 'success' : 'danger'">
              {{ row.status === 'enabled' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="{ row }">
            <el-button size="small" @click="openDetail(row)">查看</el-button>
            <el-button size="small" type="warning" @click="toggleStatus(row)">
              {{ row.status === 'enabled' ? '禁用' : '启用' }}
            </el-button>
            <el-button size="small" type="danger" @click="confirmDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 查看详情弹窗 -->
    <el-dialog v-model="detailDialogVisible" title="模型详情" width="600px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="模型名称">{{ currentModel.name }}</el-descriptions-item>
        <el-descriptions-item label="模型类型">{{ currentModel.type }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ currentModel.time }}</el-descriptions-item>
        <el-descriptions-item label="数据来源">{{ currentModel.source }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ currentModel.status }}</el-descriptions-item>
      </el-descriptions>

      <div ref="chartRef" style="width: 100%; height: 300px; margin-top: 20px;"></div>

      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 删除确认弹窗 -->
    <el-dialog v-model="confirmDeleteDialogVisible" title="确认删除" width="300px">
      <span>确定要删除模型 "{{ deleteTarget?.name }}" 吗？</span>
      <template #footer>
        <el-button @click="confirmDeleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="deleteModel">删除</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import * as echarts from 'echarts'

const models = ref([
  { id: 1, name: 'MLP预测器', type: 'MLP', time: '2024-05-01', status: 'enabled', source: 'user' },
  { id: 2, name: 'CART分类器', type: 'CART', time: '2024-05-03', status: 'disabled', source: 'platform' },
  { id: 3, name: 'XGBoost优化器', type: 'XGBoost', time: '2024-05-04', status: 'enabled', source: 'user' },
  { id: 4, name: 'SVM模型A', type: 'SVM', time: '2024-05-06', status: 'enabled', source: 'platform' },
  { id: 5, name: 'CART模型B', type: 'CART', time: '2024-05-08', status: 'disabled', source: 'user' }
])

const filterStatus = ref('')
const filterSource = ref('')

const filteredModels = computed(() => {
  return models.value.filter(m =>
    (filterStatus.value === '' || m.status === filterStatus.value) &&
    (filterSource.value === '' || m.source === filterSource.value)
  )
})

const detailDialogVisible = ref(false)
const currentModel = ref({})
const chartRef = ref(null)

function openDetail(model) {
  currentModel.value = model
  detailDialogVisible.value = true
  nextTick(() => {
    const myChart = echarts.init(chartRef.value)
    const scores = [
      (Math.random() * 0.2 + 0.75).toFixed(2),
      (Math.random() * 0.2 + 0.7).toFixed(2),
      (Math.random() * 0.2 + 0.7).toFixed(2),
      (Math.random() * 0.2 + 0.7).toFixed(2)
    ]
    const modelStyles = {
      'MLP':     { color: '#1890FF', lineStyle: 'solid', area: true },
      'CART':    { color: '#F5222D', lineStyle: 'dashed', area: false },
      'SVM':     { color: '#52C41A', lineStyle: 'dotted', area: false },
      'XGBoost': { color: '#FAAD14', lineStyle: 'solid', area: true }
    }
    const style = modelStyles[model.type] || { color: '#ccc', lineStyle: 'solid', area: false }
    myChart.setOption({
      title: { text: '性能评分雷达图', left: 'center' },
      radar: {
        indicator: [
          { name: '准确率', max: 1 },
          { name: '精确率', max: 1 },
          { name: '召回率', max: 1 },
          { name: 'F1 分数', max: 1 }
        ]
      },
      series: [{
        type: 'radar',
        name: model.name,
        lineStyle: { type: style.lineStyle, color: style.color },
        areaStyle: style.area ? { color: style.color, opacity: 0.2 } : undefined,
        symbol: 'circle',
        itemStyle: { color: style.color },
        data: [{ value: scores, name: model.type }]
      }]
    })
  })
}

function toggleStatus(model) {
  model.status = model.status === 'enabled' ? 'disabled' : 'enabled'
}

const confirmDeleteDialogVisible = ref(false)
const deleteTarget = ref(null)

function confirmDelete(model) {
  deleteTarget.value = model
  confirmDeleteDialogVisible.value = true
}

function deleteModel() {
  models.value = models.value.filter(m => m.id !== deleteTarget.value.id)
  confirmDeleteDialogVisible.value = false
}

function resetFilters() {
  filterStatus.value = ''
  filterSource.value = ''
}

</script>

<style scoped>
.header-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>
